<template>
  <div class="bpr3-bg">
    <div class="co-title">
      <div class="co-title-name">
        <img src="@/assets/cockpit/bpr3-title.png" alt="" />
      </div>
      <div class="co-title-right">
        <div class="co-title-breathe"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
    </div>
    <div class="bpl-container">
      <ul class="bpr3-main">
        <li class="bpr3-m-title">
          <div>
            <p>总任务数</p>
            <p>已完成</p>
            <p>完成率</p>
          </div>
        </li>
        <li class="bpr3-table bpr3-table1">
          <table class="bpr3-tbe">
            <tr class="bpr3-tbeh">
              <th colspan="2">2020督察反馈问题任务</th>
            </tr>
            <tr class="bpr3-tbeh">
              <th>国家</th>
              <th>省厅</th>
            </tr>
            <tr class="bpr3-tbeb" v-for="(item, index) in tableData1" :key="index">
              <td class="bpr3-tbeb-title">
                <p>{{ item.data1 }}</p>
              </td>
              <td>{{ item.data2 }}</td>
            </tr>
          </table>
        </li>
        <li class="bpr3-table bpr3-table1">
          <table class="bpr3-tbe">
            <tr class="bpr3-tbeh">
              <th colspan="3">月清三地任务</th>
            </tr>
            <tr class="bpr3-tbeh">
              <th>批而未供</th>
              <th>违法用地</th>
              <th>闲置土地</th>
            </tr>
            <tr class="bpr3-tbeb" v-for="(item, index) in tableData2" :key="index">
              <td class="bpr3-tbeb-title">
                <p>{{ item.data1 }}</p>
              </td>
              <td>{{ item.data2 }}</td>
              <td>{{ item.data3 }}</td>
            </tr>
          </table>
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'

@Component({
  name: 'BprItem3',
  components: {}
})
export default class BprItem3 extends Vue {
  @Prop({ default: {} }) infoData!: any
  private originList: any[] = []
  private tableData1: any[] = [
    {
      data1: '38',
      data2: '642'
    },
    {
      data1: '38',
      data2: '615'
    },
    {
      data1: '100%',
      data2: '95.79%'
    }
  ]
  private tableData2: any[] = [
    {
      data1: '139',
      data2: '597',
      data3: '222'
    },
    {
      data1: '74',
      data2: '436',
      data3: '154'
    },
    {
      data1: '53.24%',
      data2: '73.03%',
      data3: '69.06%'
    }
  ]
  // @Watch('infoData', { deep: true, immediate: true }) dataChange(val: any) {
  //   if(val && val.zhiFas) {
  //     this.originList = val.zhiFas
  //     if(this.originList.length > 0) {
  //       this.handleList()
  //     }
  //   }
  // }
  mounted() {}
  private handleList() {
    this.originList.forEach((e: any) => {
      if (e.type === 1) {
        if (e.subType === 1) {
          this.tableData1[0].data1 = e.totalTaskQuantity
          this.tableData1[1].data1 = e.finishTaskQuantity
          this.tableData1[2].data1 = e.finishRate + '%'
        }
        if (e.subType === 2) {
          this.tableData1[0].data2 = e.totalTaskQuantity
          this.tableData1[1].data2 = e.finishTaskQuantity
          this.tableData1[2].data2 = e.finishRate + '%'
        }
      }
      if (e.type === 2) {
        if (e.subType === 1) {
          this.tableData2[0].data1 = e.totalTaskQuantity
          this.tableData2[1].data1 = e.finishTaskQuantity
          this.tableData2[2].data1 = e.finishRate + '%'
        }
        if (e.subType === 2) {
          this.tableData2[0].data2 = e.totalTaskQuantity
          this.tableData2[1].data2 = e.finishTaskQuantity
          this.tableData2[2].data2 = e.finishRate + '%'
        }
        if (e.subType === 3) {
          this.tableData2[0].data3 = e.totalTaskQuantity
          this.tableData2[1].data3 = e.finishTaskQuantity
          this.tableData2[2].data3 = e.finishRate + '%'
        }
      }
    })
  }
}
</script>
<style lang="scss" scoped>
@import '~@/styles/cockpit.scss';
.bpr3-bg {
  width: 100%;
  height: 100%;
  padding: 12px 16px 12px 100px;
  background: url('~@/assets/cockpit/bpr3-bg.png') no-repeat left center/ 99.5% 100%;
  position: relative;
  &::before {
    content: '';
    display: block;
    width: 20px;
    height: 103%;
    background: url('~@/assets/cockpit/bpr-bg-line.png') no-repeat 0/ 100% 100%;
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translate(0, -50%);
  }
  .co-title {
    width: 92%;
    left: 8%;
  }
}
.bpr3-main {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  .bpr3-m-title {
    flex: none;
    width: 50px;
    margin: 0 8px 0 0;
    > div {
      margin: 46px 0 0 0;
      > p {
        font-size: 12px !important;
        line-height: 34px;
        color: #00eaff;
        text-align: right;
        margin: 1px 0 0;
      }
    }
  }
}
.bpr3-table {
  flex: auto;
  margin: 0 4px 0 0;
  &:last-child {
    margin-right: 0;
  }
  .bpr3-tbe {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0px 2px;
    text-align: center;
    .bpr3-tbeh {
      height: 20px;
      background: rgba(#fff, 0.1);
      th {
        font-size: 12px !important;
        line-height: 18px;
        color: #bffeff;
        font-weight: 400;
      }
    }
    .bpr3-tbeb {
      td {
        padding: 7px 4px;
        background: rgba(#fff, 0.05);
        font-size: 16px !important;
        line-height: 20px;
        color: #fff;
        font-weight: 500;
        > span {
          font-size: 12px !important;
          color: #fff;
          font-weight: 400;
        }
      }
      .bpr3-tbeb-title {
        padding: 0 0 0 2px !important;
        background: none;
        border-left: 2px solid #006aff;
        position: relative;
        > p {
          width: 100%;
          height: 100%;
          padding: 7px 4px;
          background: rgba(#fff, 0.05);
          line-height: 20px;
          text-align: center;
          font-size: 16px !important;
          color: #fff;
          font-weight: 400;
        }
      }
    }
  }
}
</style>
